<template>
  <el-container>
    <el-header height="80px">
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside
        v-if="$route.meta.aside"
        width="auto"
        :style="{ height: mainHeight + 'px' }"
      >
        <slot name="aside"></slot>
      </el-aside>
      <el-main :style="{ padding: 0, height: mainHeight + 'px' }">
        <div :style="{ padding: '20px', width: mainWidth + 'px' }">
          <slot></slot>
        </div>
      </el-main>
      <Notify></Notify>
    </el-container>
  </el-container>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { throttle } from "lodash";

import Header from "@/components/header";
import Notify from "@/components/notify";

export default {
  name: "Layout",
  components: {
    Header,
    Notify
  },
  data() {
    return {
      mainWidth: 0,
      mainHeight: 0
    };
  },
  computed: {
    ...mapState(["MAIN_WIDTH", "IS_VISIBLE_ASIDE"])
  },
  watch: {
    $route() {
      this.initMainRect();
    },
    MAIN_WIDTH() {
      this.mainWidth = this.getMainWidth();
    },
    IS_VISIBLE_ASIDE() {
      this.initMainRect();
    }
  },
  methods: {
    ...mapMutations(["SET_CLIENT_HEIGHT"]),

    getMainWidth() {
      let clinetWidth = document.documentElement.clientWidth;
      let tableWidth = this.$route.meta.custom ? this.MAIN_WIDTH : 0;
      if (this.$route.meta.aside) {
        if (this.IS_VISIBLE_ASIDE) {
          return Math.max(tableWidth, clinetWidth - 240, 960);
        } else {
          return Math.max(tableWidth, clinetWidth - 100, 1100);
        }
      } else {
        return Math.max(tableWidth, clinetWidth - 40, 1160);
      }
    },
    initMainRect() {
      this.mainWidth = this.getMainWidth();
      this.mainHeight = document.documentElement.clientHeight - 80;
      this.SET_CLIENT_HEIGHT(this.mainHeight);
    }
  },
  mounted() {
    window.addEventListener("resize", throttle(this.initMainRect, 200), false);
  },
  created() {
    this.initMainRect();
  }
};
</script>